<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <div id="app"></div> -->
    <div id="app" >

        <div v-html="title" v-show="books.length > 0"></div>
        <!-- {{title}}  -->

        <br>
        图书编号:<input type="number" v-model="newBook.id"> <br>
        图书名称:<input type="text" v-model="newBook.bookname"> <br>
        图书价格:<input type="number" v-model="newBook.price"> <br>
        图书作者:<input type="text" v-model="newBook.author"> <br>

        <input type="button" value="添加" v-on:click="addBooks()">

        <ul>
            <li v-for="(book,i) in books" :key="book.id">
                图书名:{{book.bookname}}，价格:{{book.price}},作者:{{book.author}}
                <button @click="deleteBook(i)">删除</button>
            </li> 
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        // el:"#app",

        //挂载模板的第二种方式
    //     template:`
    //     <div id="app">
    //     {{title}} 

    //     <br>
    //     图书编号:<input type="number" v-model="newBook.id"> <br>
    //     图书名称:<input type="text" v-model="newBook.bookname"> <br>
    //     图书价格:<input type="number" v-model="newBook.price"> <br>
    //     图书作者:<input type="text" v-model="newBook.author"> <br>

    //     <input type="button" value="添加" v-on:click="addBooks()">

    //     <ul>
    //         <li v-for="(book,i) in books" :key="book.id">
    //             图书名:{{book.bookname}}，价格:{{book.price}},作者:{{book.author}}
    //         </li> 
    //     </ul>
    // </div>
    //     `,

        //挂载模板的第三种方式
        // render(createElement){
        //     return createElement("h1","aaa");
        // },
        data:{
            title:"<span style='color:red'>hello Vue</span>",
            books:[
                {id:1,bookname:"斗破苍穹",price:20,author:"天蚕土豆"},
                {id:2,bookname:"星辰变",price:20,author:"西红柿"},
                {id:3,bookname:"圣墟",price:20,author:"辰东"},
                {id:4,bookname:"爱上霸道总裁",price:20,author:"匿名"},
            ],
            newBook:{
                id:0,
                bookname:"逆天邪神",
                price:0,
                author:"火星"
            }
        },
        methods: {
            addBooks(){
                //要获取data里面的数据，一定要用this.
                this.books.push(this.newBook);
            },
            deleteBook(i){
                this.books.splice(i,1);
            }
        },
    });
    vm.$mount("#app");
    console.log(vm);
</script>
</html>